<template>
	<div>
		<navigation-bar customTitle="我的上传">
			<div class="searchContent">
				<el-input
					v-model="elementName"
					placeholder="请输入元件名称"
					size="mini"
					style="width: 150px; margin-right: 10px"
				></el-input>
				<el-select
					v-model="version"
					clearable
					placeholder="请选择版本"
					size="mini"
					style="width: 150px; margin-right: 10px"
				>
					<el-option
						v-for="item in versionList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						width="150px"
					>
					</el-option>
				</el-select>
				<el-select
					v-model="status"
					clearable
					placeholder="请选择状态"
					size="mini"
					style="width: 150px; margin-right: 10px"
				>
					<el-option
						v-for="item in statusList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						width="150px"
					>
					</el-option>
				</el-select>
				<custom-button
					type="search"
					style="margin-right: 10px"
					@searchClick="searchClick"
				></custom-button>
				<custom-button
					type="reset"
					style="margin-right: 10px"
					@resetClick="resetClick"
				></custom-button>
			</div>
		</navigation-bar>
		<table-index
			:dataSource="dataSource"
			:tableColumns="tableColumns"
			:btnList="btnList"
			:pageSize="pageSize"
			:pageCount="pageCount"
			:pageNo="pageNo"
			btnListWidth="70"
			@pageChange="pageChange"
			@editRow="editRow"
			@viewRow="viewRow"
			@deleteRow="deleteRow"
			@handleSelectionChange="handleSelectionChange"
		></table-index>

		<div v-if="dialogShow">
			<custom-dialog
				:title="dialogTitle"
				size="large"
				@dialogClose="dialogClose"
			>
				<form-index
					:formConfig="formConfig"
					@submit="submit"
					:type="type"
					@formInputChange="formInputChange"
					ref="form"
				>
				</form-index>
			</custom-dialog>
		</div>
	</div>
</template>

<script>
	import { tagManageForm } from "@/assets/form/managementCenter/tagManageForm"
	import customDialog from "@/components/customComponents/customDialog"
	import customButton from "@/components/customComponents/customForm/customButton"
	import formIndex from "@/components/customComponents/customForm/formIndex"
	import tableIndex from "@/components/customComponents/customeTable/tableIndex"
	import navigationBar from "@/components/customComponents/managementCenter/navigationBar"
	import { AjaxCommon } from "@/libs/apiCommon"
	import { PopupCommon } from "@/libs/popupCommon"
	import { SessionCommon } from "@/libs/sessionCommon"
	export default {
		components: {
			navigationBar,
			customButton,
			tableIndex,
			customDialog,
			formIndex,
		},
		data() {
			return {
				version: "",
				versionList: [
					{
						value: "1",
						label: "版本1",
					},
					{
						value: "2",
						label: "版本2",
					},
				],
				status: "",
				statusList: [
					{
						value: "1",
						label: "发布中",
					},
					{
						value: "2",
						label: "已发布",
					},
					{
						value: "3",
						label: "待发布",
					},
				],

				selectItem: [],
				elementName: "",
				// table 相关参数  begin
				dataSource: [],
				tableColumns: [
					{
						prop: "contents",
						label: "目录",
					},
					{
						prop: "elementName",
						label: "元件名称",
						width: 120,
					},
					{
						prop: "version",
						label: "版本",
						dictName: "version",
					},
					{
						prop: "elementStatus",
						label: "元件状态",
						dictName: "status",
						class: "elementStatus",
					},
					{
						prop: "flowStatus",
						label: "当前流程状态",
					},
					{
						prop: "checkName",
						label: "审核人",
					},
					{
						prop: "uploadTime",
						label: "上传时间",
					},
					{
						prop: "publishTime",
						label: "发布时间",
					},
				],
				btnList: ["download"],
				pageSize: 20,
				pageCount: 100,
				pageNo: 1,
				// table 相关参数  end

				// 弹窗是否显示
				dialogShow: false,
				// 弹窗标题 (新增修改不同)
				dialogTitle: "",

				// form的配置信息
				formConfig: tagManageForm,
				type: "add",
			}
		},
		methods: {
			deleteAll() {
				if (this.selectItem.length == 0) {
					PopupCommon.notify("info", "请先勾选数据")
					return
				}
				PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
					.then(() => {
						// self.optReason = ""
						// self.dialogVisible = true
						// // optReason
						// const data = {
						// 	index: i,
						// 	data: d[i],
						// }
						// self.formData = data
						// // this.$emit("deleteRow", data)
						console.log(this.selectItem)
					})
					.catch(() => {
						// 这里尽量写下，否则会报警告异常。
						console.log("已取消删除")
					})
			},
			handleSelectionChange(d) {
				this.selectItem = d
				console.log(d)
			},
			formInputChange(e) {
				// if (e.filedName == "idCard") {
				// 	const data = CardId.getInfoByCardId(e.value)
				// 	if (data) {
				// 		let newData = e.allData
				// 		newData["birthday"] = data.birthday
				// 		newData["sex"] = data.sex
				// 		this.$refs.form.changeFormValue(newData)
				// 	}
				// }
				console.log(e)
			},
			submit(d) {
				console.log(d)
				// let self = this
				// console.log(d)
				// if (d.id) {
				// 	AjaxCommon("/ccdc/cfg/device/device/edit", "post", d)
				// 		.then((res) => {
				// 			if (res.data.code == 200) {
				// 				PopupCommon.notify("success", "操作成功")
				// 				self.initPage()
				// 				self.dialogClose()
				// 				this.dialogClose()
				// 			} else {
				// 				PopupCommon.notify("error", res.data.message)
				// 			}
				// 		})
				// 		.catch((err) => {
				// 			PopupCommon.notify("error", err.message)
				// 		})
				// } else {
				// 	delete d.id
				// 	AjaxCommon("/ccdc/cfg/device/device/add", "post", d)
				// 		.then((res) => {
				// 			if (res.data.code == 200) {
				// 				PopupCommon.notify("success", "操作成功")
				// 				self.initPage()
				// 				self.dialogClose()
				// 			} else {
				// 				PopupCommon.notify("error", res.data.message)
				// 			}
				// 		})
				// 		.catch((err) => {
				// 			PopupCommon.notify("error", err.message)
				// 		})
				// }
			},
			dialogClose() {
				this.dialogShow = false
			},
			searchClick() {
				this.pageNo = 1
				this.initPage()
			},
			resetClick() {
				this.elementName = ""
			},
			addClick() {
				let formConfigItem = this.formConfig
				formConfigItem.map((t) => {
					Object.keys(t).map((res) => {
						if (res == "fieldName") {
							t.filedValue = ""
						}
					})
				})
				this.formConfig = formConfigItem
				this.type = "add"
				this.dialogShow = true
				this.dialogTitle =
					"新增" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
			},
			// 分页点击事件
			pageChange(p) {
				this.pageNo = p
				this.initPage()
			},
			editRow(d) {
				this.type = "edit"
				let formConfigItem = this.formConfig
				formConfigItem.map((t) => {
					Object.keys(t).map((res) => {
						if (res == "fieldName") {
							t.filedValue = d.data[t[res]]
						}
					})
				})
				this.formConfig = formConfigItem
				this.dialogShow = true
				this.dialogTitle =
					"编辑" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
			},
			viewRow(d) {
				this.type = "look"
				let formConfigItem = this.formConfig
				formConfigItem.map((t) => {
					Object.keys(t).map((res) => {
						if (res == "fieldName") {
							t.filedValue = d.data[t[res]]
						}
					})
				})
				this.formConfig = formConfigItem
				this.dialogShow = true
				this.dialogTitle =
					"查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
			},
			deleteRow(d) {
				console.log(d)
				const id = d.data.id
				let self = this
				AjaxCommon("/ccdc/cfg/device/device/delete?id=" + id, "delete", {
					optReason: d.optReason,
				}).then((res) => {
					console.log(res, "res...............")
					if (res.data.code == 200) {
						PopupCommon.notify("success", "删除成功")
						self.initPage()
						self.dialogClose()
					} else {
						PopupCommon.notify("error", res.data.message)
					}
				})
			},
			// 初始化事件
			initPage() {
				var dataValue = [
					{
						contents: "目录1",
						elementName: "元件名称1",
						version: "1",
						elementStatus: "1",
						flowStatus: "流程状态",
						checkName: "审核人1",
						uploadTime: "2024-02-03",
						publishTime: "2024-02-03",
						id: 1,
					},
					{
						contents: "目录1",
						elementName: "元件名称1",
						version: "2",
						elementStatus: "3",
						flowStatus: "流程状态",
						checkName: "审核人1",
						uploadTime: "2024-02-03",
						publishTime: "2024-02-03",
						id: 2,
					},
					{
						contents: "目录1",
						elementName: "元件名称1",
						version: "1",
						elementStatus: "2",
						flowStatus: "流程状态",
						checkName: "审核人1",
						uploadTime: "2024-02-03",
						publishTime: "2024-02-03",
						id: 3,
					},
				]
				this.dataSource = dataValue
				this.pageCount = dataValue.length
				// let self = this
				// AjaxCommon("/ccdc/cfg/device/device/listByPage", "post", {
				// 	elementName: this.elementName,
				// 	deviceStatus: this.status,
				// 	deviceType: this.usersex,
				// 	pageNo: this.pageNo,
				// 	pageSize: this.pageSize,
				// }).then((res) => {
				// 	if (res.data.code == 200) {
				// 		self.dataSource = res.data.result.records
				// 		self.pageCount = res.data.result.total
				// 	} else {
				// 		PopupCommon.notify("error", res.data.message)
				// 	}
				// })
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.initPage()
			})
		},
	}
</script>

<style>
	.elementFBZ {
		background-color: #ebf4fe;
		border-radius: 6px;
		color: #439efe !important;
		padding: 5px 10px;
		font-size: 14px;
	}

	.elementYFB {
		background-color: #eff8ea;
		border-radius: 6px;
		color: #6ac25c !important;
		padding: 5px 10px;
		font-size: 14px;
	}

	.elementDFB {
		background-color: #f3f3f4;
		border-radius: 6px;
		color: #9897a8 !important;
		padding: 5px 10px;
		font-size: 14px;
	}
</style>
